<template>
  <div class="container">
    <div class="picture">
      <img :src="item.src" alt="" />
    </div>
    <div class="describe">
      <p class="title">{{ item.name }}</p>
      <p class="d">{{ title }}</p>
    </div>
    <hr />
    <div class="number">
      <van-stepper v-model="value" />
    </div>
    <div class="shopping_cart">
      <img
        src="https://hzyczn.52br.net/images/h5/icon/kefu.png"
        alt=""
        srcset=""
      />
      <p class="cart" @click="addCar">加入购物车</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCarStore } from '@/stores'
const tit =
  '洗水标是服装生产时经过严格洗水测试所定,洗衣对不同材质的衣物洗涤方式严格遵循衣物的洗水标志。衣物在入厂时、洗前、洗后、后整理时共经历多轮杀菌消毒流程出厂人工整理独立包装，保障您的衣物安全健康。'
const title = ref(tit)
const value = ref(1)
const props = defineProps(['item', 'off'])
console.log(props)
const carStore = useCarStore()
// 加入购物车
const addCar = () => [
  carStore.addCar({
    name: props.item.name,
    id: props.item.id,
    total: value.value,
    price: props.item.price,
    src: props.item.src
  }),
  props.off()
]
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 3vw 2vw 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .picture {
    width: 100%;
    margin: 0 auto;
    height: 37.3333vw;
    border-radius: 1.3333vw;
    position: relative;
    background: url('https://hzyczn.52br.net/images/h5/img/detail.png')
      no-repeat left top/100%;
    img {
      position: absolute;
      top: 50%;
      right: 10%;
      transform: translate(0, -50%);
    }
  }
  .describe {
    .title {
      font-family: PingFangSCBold-Bold;
      font-size: 4vw;
      font-weight: normal;
      line-height: normal;
      text-align: justify; /* 浏览器可能不支持 */
      color: rgba(0, 0, 0, 0.87);
      margin-bottom: 0;
    }
    .d {
      font-family: PingFangSCMedium-Medium;
      font-size: 3.5vw;
      text-align: justify; /* 浏览器可能不支持 */
      letter-spacing: 0em;
      color: rgba(0, 0, 0, 0.54);
      margin: 0;
    }
  }
  hr {
    color: rgba(0, 0, 0, 0.12);
  }
  //步进器
  .number {
    text-align: right;
  }
  // 购物车
  .shopping_cart {
    position: fixed;
    padding-bottom: 2vw;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    img {
      height: 8vw;
    }
    .cart {
      color: #fff;
      text-align: center;
      line-height: 9.3333vw;
      margin: 0;
      width: 80%;
      height: 8vw;
      border-radius: 9.3333vw;
      opacity: 1;
      background: #b14094;
    }
  }
}
</style>
